/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-22 09:28:37
 * @LastEditTime : 2023-08-22 10:18:39
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Admin\Other\CameraPage.jsx
 * @Description  :
 */
import './Sass/CameraPage.scss'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Http } from '../../../Common/Api'
import { parseURLParams } from '../../../Common/Configure/Common'
import { Video } from '../../../Common/Configure/Video'
import { Result, Pagination } from 'antd'

const CameraPage = () => {
    const projectList = {
        '85d783ab-465f-45c2-a735-c34b29c1304c': '吉黑高速',
        'e19da698-b667-4a08-9a81-1422f4f7abec': '铁科五常至拉林河',
        '2bf5d48b-bb84-44bf-8276-e66d15d48a5d': '铁科方正至延寿',
        '3c805968-a921-4cc1-9a50-bf768b32fc06': '铁科尚志至五常',
        '104f1ad9-3504-4f32-aa5a-aca0290ac9e5': '鹤岗至苔青',
        '9c5232aa-2a91-47c9-9fc9-0f369308864e': '苔青至伊春',
        '35806f97-50ac-4910-83a1-5b3c6678c9b4': '西南环段',
        'd95ddc39-ea59-4f5b-aa58-ae2781530da6': '北漠高速',
        'f6428d8c-8649-40f8-a5d8-a38e2c4578c2': '绥阳至马桥河',
        'c7c109f0-4e10-4501-9830-ae4ccc92dadd': '雪乡至亚布力',
        '0571b89b-7785-4bcd-8cc6-4d25c7d9b857': '铁科铁力至凤阳',
        'b153db14-72ff-4949-8706-4504d19e7bae': '铁科凤阳至方正',
        '784932ca-be64-42b2-a0bc-33384c9293c0': '331二期工程',
        'df96dd38-1049-43f6-a55b-9593fbf06be8': '北环双井至里木店',
        '157d75ad-1799-4fbb-8159-e8ca7c7eb6eb': '北环永源至双井',
    }

    const { search } = useLocation()
    const { projectUuid, pageSize } = parseURLParams(search)
    const [Camera, setCamera] = useState([])
    const [total, setTotal] = useState(1)
    const [pageIndex, setPageIndex] = useState(1)
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setTotal(res.total)
            setCamera(res.list)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getCameras', data: { pageIndex, pageSize, projectUuid } })
    }, [pageIndex, pageSize, projectUuid, runAsync])

    return (
        <div className="CameraPage">
            <div className="title">{projectList[projectUuid]}</div>
            <div className="video">
                {!Camera && Camera.length === 0 ? (
                    <Result status="500" title="暂无监控数据" />
                ) : (
                    Camera.map((item, index) => (
                        <div
                            key={index}
                            className="videoItem"
                            style={(() => {
                                switch (Camera.length) {
                                    case 1:
                                        return { width: '100%', height: '100%' }
                                    case 2:
                                        return { width: '50%', height: '100%' }
                                    case 3:
                                        return { width: '50%', height: '50%' }
                                    case 4:
                                        return { width: '50%', height: '50%' }
                                    case 5:
                                        return { width: 'calc(100% / 3)', height: '50%' }
                                    case 6:
                                        return { width: 'calc(100% / 3)', height: '50%' }
                                    case 7:
                                        return { width: '25%', height: '50%' }
                                    case 8:
                                        return { width: '25%', height: '50%' }
                                    case 9:
                                        return { width: 'calc(100% / 3)', height: 'calc(100% / 3)' }
                                    case 10:
                                        return { width: '25%', height: 'calc(100% / 3)' }
                                    case 11:
                                        return { width: '25%', height: 'calc(100% / 3)' }
                                    case 12:
                                        return { width: '25%', height: 'calc(100% / 3)' }
                                    default:
                                        break
                                }
                            })()}
                        >
                            {/* 监控 */}
                            <Video data={item} date={new Date().getTime()} />
                        </div>
                    ))
                )}
            </div>
            <div className="pages">
                {Camera && Camera.length !== 0 && (
                    <Pagination
                        total={total}
                        showTotal={total => `共${total}条记录 -- 当前第${pageIndex}页`}
                        showSizeChanger={false}
                        pageSize={pageSize}
                        current={pageIndex}
                        onChange={e => setPageIndex(e)}
                    />
                )}
            </div>
        </div>
    )
}

export default CameraPage
